<!--  -->
<template>
  <div class="component-view">
    <el-table
      :data="settingList"
      size="medium"
      border
      style="width: 100%"
    >
      <el-table-column
        width="260"
        label="部门"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
          <span v-if="scope.row.tip" style="margin-left:5px">
            <el-tooltip :content="scope.row.tip" placement="bottom" effect="light">
              <i class="el-icon-question" style="color: #666;" />
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        width="230"
        label="选择部门"
      >
        <template slot-scope="scope">
          <el-cascader
            :ref="'department'+scope.$index"
            v-model="settingList[scope.$index].departments.department_id"
            class="department-select"
            :options="deptOptions"
            placeholder="请选择部门"
            :show-all-levels="false"
            :props="{ expandTrigger: 'hover',checkStrictly: true , emitPath: false,label:'department_name',value:'id'}"
            @change="(val)=>{departmentChange(val,scope.$index)}"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="打印内容配置"
      >
        <template slot-scope="scope">
          <el-select
            v-model="settingList[scope.$index].print_field"
            style="width: 100%;"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请输入或选择该部门尽调需要打印内容"
            @focus="fieldFocus(scope.row.departments.department_id)"
            @change="(val)=>{fieldChange(val,scope.$index)}"
          >
            <template v-if="optionsData.length>0">
              <el-option
                v-for="(item, idx) in optionsData"
                :key="idx"
                :label="item.label_key"
                :value="item.label_key"
              />
            </template>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  departmentList,
  labelInfo
} from '@/api/lookInfoModel'
import { lookInfoSet, updateLookInfoSet } from '@/api/printSetting'
export default {
  data() {
    return {
      userInfo: null,
      queryParams: {
        department_name: '',
        department_status: null
      },
      optionsData: [],
      deptOptions: [],
      fetchData: {},
      settingList: [
        { name: '项目简介', tip: '商务拓展部从项目开发方向阐述', departments: { department_id: '', department_name: '' }, print_field: [] },
        { name: '注册部调研及意见', tip: '请着重从国内外注册申报、同类型药物种类、该药物优缺点情况方向调研', departments: { department_id: '', department_name: '' }, print_field: [] },
        { name: '研发中心及下属各职能部门意见', tip: '请从项目整体计划安排、实际实行、知识产权等方面阐述', departments: { department_id: '', department_name: '' }, print_field: [] },
        { name: '临床意见', tip: '临床试验推动难度评价及市场情况阐述', departments: { department_id: '', department_name: '' }, print_field: [] },
        { name: '财务部意见', tip: '', departments: { department_id: '', department_name: '' }, print_field: [] }
      ]
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.userInfo = this.$store.getters.userInfo
    this.getDepartmentList()
    this.getLookInfoSet({ dictType: 'jd_print_type' })
  },
  methods: {
    fieldFocus(id) {
      this.getLabelInfo(id)
    },
    fieldChange(val, index) {
      console.log(val, index, this.settingList)
    },
    submitData() {
      this.fetchData.dict_val = JSON.stringify(this.settingList)
      this.updateLookInfoSetting(this.fetchData)
    },
    // 修改打印设置数据
    updateLookInfoSetting(data) {
      updateLookInfoSet(data).then(res => {
        if (res.code === 200) {
          this.$emit('saveSuccess')
          this.$message({
            type: 'success',
            message: '保存成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    // 获取打印设置初始数据
    getLookInfoSet(params) {
      lookInfoSet(params).then(res => {
        if (res.code === 200) {
          console.log(res.data)
          this.fetchData = res.data[0] || {}
          if (this.fetchData && this.fetchData.dict_val) {
            this.settingList = JSON.parse(this.fetchData.dict_val) || []
          }
        }
      })
    },
    // 获取部门尽调须填写项目
    getLabelInfo(id) {
      labelInfo({ id: id }).then(res => {
        if (res.code === 200) {
          this.optionsData = res.data
        }
      })
    },
    // 获取部门列表
    getDepartmentList() {
      const that = this
      departmentList(that.queryParams).then((res) => {
        if (res.code === 200) {
          if (res.data) {
            that.deptOptions = res.data || []
          }
        }
      })
    },
    // 部门改变
    departmentChange(val, index) {
      const re = 'department' + index
      const labels = this.$refs[re].getCheckedNodes()[0].label
      this.$set(this.settingList[index].departments, 'department_name', labels)
      console.log(val, labels, this.settingList)
    }
  }
}
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
@import '@/styles/variables.scss';

</style>
